<template>
	<view class="box">
	<view class="content-box">
		<u-navbar title="确认下单" :bgColor="bgColor" :fixed="true" leftIcon="arrow-left" leftIconColor="#000"
			leftIconSize="42rpx" autoBack placeholder>
		</u-navbar>
		
		<view class="f-t-txt">
			<view class="bt">
				<view class="top">
					2小时陪诊服务
				</view>
						<view class="btn-txt">线上代办预约就诊号服务，请如实填写信息。</view>
					</view>
					<u-form-item @click="goPatients()" label="请选择就诊人" prop="patients" borderBottom>
							<u-input v-model="form.patients" disabled placeholderClass="plaClass" disabledColor="#ffffff"
								placeholder="选择就诊人" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					<u-form :model="form" :rules="rules" ref="uForm" :label-style="labelStyle" errorType="toast">
						<u-form-item @click="goChooseHospital()" label="请选择医院" prop="hospital" borderBottom>
							<u-input v-model="form.hospital" disabled placeholderClass="plaClass" disabledColor="#ffffff"
								placeholder="选择医院" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item @click="goSelectDepartment()" label="请选择科室" prop="administrativeOffice" borderBottom>
							<u-input v-model="form.administrativeOffice" disabled placeholderClass="plaClass"
								disabledColor="#ffffff" placeholder="选择科室" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="请选择服务时间" prop="appointmentDate" borderBottom @click="dateShow=true">
							<u-input v-model="form.appointmentDate" disabled placeholderClass="plaClass"
								disabledColor="#ffffff" placeholder="选择服务时间" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
		
						<u-form-item label="陪诊员性别" prop="serviceType" borderBottom>
							<u-radio-group v-model="form.serviceType" placement="row" @change="groupChange">
								<u-radio v-for="(item, index) in lists" :key="index" :label="item.name" :name="item.name"
									@change="radioChange">
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item class="sepclial" prop="specifyInfo">
							<u-textarea v-model="form.specifyInfo" placeholder="备注" confirmType="done"
								placeholderStyle="font-size: 28rpx;font-family: PingFangSC-Light, PingFang SC;font-weight: 300;color: #6F7DA2;letter-spacing: 1px;">
							</u-textarea>
						</u-form-item>
					</u-form>
					<view class="btn-box" style="padding: 0 20rpx;margin-top: 60rpx;">
			</view>
			<u-datetime-picker ref="datetimePicker" :show="dateShow" mode="datetime" v-model="timeOptions.value"
				:minDate="timeOptions.min" :maxDate="timeOptions.max" :formatter="formatter" @cancel="dateCancel"
				@confirm="dateConfirm">
			</u-datetime-picker>
		</view>
	</view>
	<view class="bottom-box">
		<view class="bottom-a">实付款：
			<view class="bottom-b">
				￥200.0
			</view>
		</view>
		<view class="bottom-c">
			确认支付
		</view>
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					hospital: "", //医院
					appointmentDate: "", // 时间
					specifyInfo: "", // 特殊需求
					patients: "", //就诊人
					administrativeOffice: "", //科室
					serviceType: "" // 服务类型
				},
				lists: [{
						name: '不限',
						disabled: false
					},
					{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				dateShow: false,
				radiovalue1: '不限',
				timeOptions: {
					value: 0,
					max: 0,
					min: 0
				},
				labelStyle: {
					color: '#333',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: '400',
					letterSpacing: '1px',
					fontFamily: 'PingFangSC - Regular,PingFang SC'
				},
				rules: {
					patients: [{
						require: true,
						message: '请选择就诊人',
						trigger: ['blur', 'change']
					}],
					hospital: [{
						require: true,
						message: '请选择医院',
						trigger: ['blur', 'change']
					}],
					administrativeOffice: [{
						require: true,
						message: '请选择科室',
						trigger: ['blur', 'change']
					}],
					appointmentDate: [{
						require: true,
						message: '请选择服务时间',
						trigger: ['blur', 'change']
					}],
					serviceType: [{
						require: true,
						message: '陪诊员性别',
						trigger: ['blur', 'change']
					}],


	
				}
			}
		},
		onLoad() {
			this.timeOptions.value = Number(new Date())
			// 预计+14天
			this.timeOptions.max = new Date('2100-01-01').getTime()
			this.timeOptions.min = Number(new Date())
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			goChooseHospital() {
				this.$u.route({
					url: 'pages/business/components/chooseHospitals'
				})
			},
			goPatients() {
				this.$u.route({
					url: 'pages/business/components/patients'
				})
			},
			goSelectDepartment() {
				this.$u.route({
					url: 'pages/business/components/selectDepartment'
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			dateConfirm(e) {
				// console.log('value', e)
				// this.params.appointmentDate = e[0]
				this.form.appointmentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				this.dateCancel()
			},
			dateCancel() {
				this.dateShow = false
			},
			formatter(type, value) {
				// console.log('type', type)
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			goBuy() {
				this.$refs.uForm.validate().then(() => {
					console.log(222222)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		background-color: #f4f4f4;
		height: 100%;
	}
	.content-box {
		/deep/.u-navbar__content.data-v-95dec1ae {
			background-color: #fff;
		}
	}
	.f-t-txt{
		background-color: #fff;
		margin: 10px;
		padding: 10px;
		border-radius: 10px;
		font-size: 14px;
		color: #c3c3c3;
		height: 300px;
		
	}
.bgimg {
		width: 100%;
		height: 180px;
		position: absolute;
		// box-sizing: border-box;
		background-size: 100%;
		background-repeat: no-repeat;

		.left {
			width: 8px;
			height: 16px;
			margin-left: 50rpx;
			margin-top: 78rpx;
		}

	}
	.top{
		font-weight: 900;
		width: 106px;
		line-height: 1px;
		color: #000;
		border-bottom:10px solid #a0b7ff ;
	}
	.form_content {
		position: absolute;
		margin-top: 150px;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: calc(100vw - 20px);
		// height: calc(100vh - 180px);
		height: 100vh;
		// background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;

		.bt {
			padding: 0 20rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1px solid rgb(214, 215, 217);

		}

	}
	.btn-txt{
		border-bottom:1px solid #cdcdcd ;
		padding-bottom: 10px;
		font-size: 12px;
	}

	.plaClass {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #6F7DA2;
		letter-spacing: 1px;
		margin-right: 10px;
	}


	/deep/ .u-form-item__body__left {
		width: 20vh !important;
		
	}

	/deep/.u-form-item__body {
		padding: 15px 0 !important;
	}

	/deep/.item__body__right__content__icon {
		margin-left: 10rpx;
	}

	/deep/.u-radio-group--row {
		justify-content: space-around;
	}

	.sepclial {
		/deep/.u-form-item__body {
			flex-direction: column !important;
		}

		/deep/.u-form-item__body__right__content {
			margin-top: 15px !important;
			padding: 0 9px !important;
		}
		/deep/.u-textarea--radius{
			margin-left: -10px;
		}
		.u-textarea {
			background: #F4F6FA;
			border-radius: 20rpx;
			width: 330px;
			height: 136px;
			
		}

		.u-border {
			// border-style: none
		}

	}	
		.bottom-box{
			position: absolute;
			bottom: 0;
			// height: 94px;
			width: 100%;
			background-color: #fff;
			margin-top: 100px;
			padding: 20rpx 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.bottom-a{
				display: flex;
				color: #A2A2A2;
			}
			.bottom-b{
				color: red;
			}
			.bottom-c{
				background-color: blue;
				color: #fff;
				width: 105px;
				height: 30px;
				font-size: 14px;
				border-radius: 15px;
				line-height: 30px;
				text-align: center;
			}
		}

</style>